﻿<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js">
</script>

</script>
<script>
function hideRooms()
	{
		$(".piippu").show();
		$(".raja").hide();
		$(".joku").hide();
	}

$(document).ready(function(){
	
  $("#adr_piippu").click(function(){
	$(".piippu").show();
	$(".raja").hide();
	$(".joku").hide();
  });
  $("#adr_raja").click(function(){
    $(".piippu").hide();
	$(".raja").show();
	$(".joku").hide();
  });
  $("#adr_joku").click(function(){
    $(".piippu").hide();
	$(".raja").hide();
	$(".joku").show();
  });
  $("#Rooms").click(function(){
	
  });
  
});


</script>

<style>
.center
{
	margin-left:1%;
	position:relative;
	width:90%;
}
.listBox
{
	margin-left:auto;
	width:20em;
	select-size:8;
}

</style>

</head>
<body onload="hideRooms()">
<div> <p id="Title"> kebab </p>
<table  class="center">
<tr>
	<td> 
	<select id="Locations" class="listBox" size="6" >
		<option id="adr_piippu" > Piippukatu </option>
		<option id="adr_raja"> Rajakatu </option>
		<option id="adr_joku" > joku </option>
		</select>
	</td>
	<td>
	<select id="Rooms" class="listBox" size="6" height="absolute">
		<option class="piippu" id="p1"> p1 </option>
		<option class="piippu" id="p2"> p2 </option>
		<option class="piippu" id="p3"> p3 </option>
		<option class="piippu" id="p4"> p4 </option>
		
		<option class="raja" id="r1"> r1 </option>
		<option class="raja" id="r2"> r2 </option>
		<option class="raja" id="r3"> r3 </option>
		<option class="raja" id="r4"> r4 </option>
		
		<option class="joku" id="j1"> j1 </option>
		<option class="joku" id="j2"> j2 </option>
		<option class="joku" id="j3"> j3 </option>
		<option class="joku" id="j4"> j4 </option>
		

		
		</select>
	</td>
	<td>
	<select id="Selected" class="listBox" size="6">
		</select>
	</td>
</tr>

</table>
</div>
</body>
</html>